<template>
	<view class="container">
		<image src="/static/back2.jpg" mode="" class="back"></image>
		<view class="" style="padding: 30rpx;">
			<view class="header">
				<text class="title">我的一对一</text>
				<!-- 搜索功能 -->
				<view class="search-container">
					<input type="text" v-model="searchQuery" placeholder="搜索学生姓名" class="search-input" />
					<button @click="searchStudent" class="search-button">搜索</button>
				</view>
			</view>
			<transition name="card">
				<view v-if="currentStudent" class="card">
					<view class="card-header">
						<text class="card-title">辅导状态：</text>
					</view>
					<view class="student-name">{{ currentStudent.isFinish==1?"已辅导，待家长确认":currentStudent.isFinish==2?"订单已完成":"等待辅导"}}</view>
				</view>
			</transition>
			<transition name="card">
				<view v-if="currentStudent" class="card">
					<view class="card-header">
						<text class="card-title">学生姓名：</text>
					</view>
					<view class="card-body">
						<view class="student-name">{{ currentStudent.studentGrade }}   {{ currentStudent.studentName }} </view>
					</view>
				</view>
			</transition>

			<transition name="card">
				<view v-if="currentStudent" class="card">
					<view class="card-header">
						<text class="card-title">一对一时间</text>
					</view>
					<view class="card-body">
						<view class="appointment">
							<text class="date" style="margin-right: 20rpx;">2024年</text>
							<text class="time">{{currentStudent.appointmentTime}}</text>
						</view>
					</view>
				</view>
			</transition>

			<transition name="card">
				<view v-if="currentStudent" class="card">
					<view class="card-header">
						<text class="card-title">留言</text>
					</view>
					<view class="card-body">
						<view class="message">{{currentStudent.appointmentContent }}</view>
					</view>
				</view>
			</transition>
			
			<transition name="card">
				<view v-if="currentStudent" class="card" style="height: 400rpx; overflow: auto;">
					<view class="card-header">
						<text class="card-title">我的评价以及教学过程</text>
					</view>
					<view class="card-body"  v-show="currentStudent.isFinish==0">
						<textarea v-model="comment" name="" id="" cols="30" rows="10" class="txt" ></textarea>
					</view>
					<view class="card-body" v-show="currentStudent.isFinish==1||currentStudent.isFinish==2">
						<textarea name="" id="" cols="30" rows="10" class="txt" v-model="currentStudent.teacherComponent" :disabled="currentStudent.isFinish==1||currentStudent.isFinish==2"></textarea>
					</view>
					<button @click="confirmFinish" v-show="currentStudent.isFinish==0" type="default">确认辅导结束，并评价</button>
					<button  v-show="currentStudent.isFinish==1||currentStudent.isFinish==2"  type="default">已评价</button>
				</view>
			</transition>

			<transition name="card">
				<view v-if="currentStudent" class="card" style="height: 300rpx; overflow: auto;">
					<view class="card-header">
						<text class="card-title">预约记录</text>
					</view>
					<view class="card-body">
						<view v-for="(record, index) in historys" :key="index" class="record"
							style="display: flex; justify-content: space-between">
							<view class="">
								<text>{{ index + 1 }}.</text>
								<text>{{ record.appointmentContent }}</text>
							</view>
							<text>{{ record.appointmentTime }}</text>
						</view>
					</view>
				</view>
			</transition>

			<!-- 分页按钮 -->
			<view class="pagination">
				<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
				<button @click="nextPage" :disabled="currentPage === students.length">下一页</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				currentPage: 1,
				students: [],
				historys: [],
				searchQuery: '',
				comment: '',
			};
		},
		onLoad() {
			let that = this;
			uni.getStorage({
				key: "teacher",
				success: function(res) {
					that.teacher = res.data;
				}
			});

			// 获取预约信息
			uni.request({
				url: globalVariable + "/getAppointmentByTeacherId?teacherId=" + that.teacher.teacherId,
				success(res) {
					let info = res.data;
					uni.showToast({
						title: info.message
					});
					if (info.status == 1) {
						that.students = info.data;
						that.updateHistorys();
					}
				}
			});
		},
		computed: {
			currentStudent() {
				return this.students[this.currentPage - 1];
			}
		},
		methods: {
			nextPage() {
				if (this.currentPage < this.students.length) {
					this.currentPage++;
					this.updateHistorys();
				}
			},
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
					this.updateHistorys();
				}
			},
			updateHistorys() {
				let that = this;
				let student = this.currentStudent;
				uni.request({
					url: globalVariable + "/getAppointmentHistory?teacherId=" + that.teacher.teacherId +
						"&studentId=" + student.studentId,
					success(res) {
						let info = res.data;
						if (info.status == 1) {
							that.historys = info.data;
						}
					}
				});
			},
			searchStudent() {
				const query = this.searchQuery.trim();
				if (!query) return;

				const studentIndex = this.students.findIndex(student =>
					student.studentName.localeCompare(query, 'zh-CN', {
						sensitivity: 'base'
					}) === 0
				);

				if (studentIndex !== -1) {
					this.currentPage = studentIndex + 1;
					this.updateHistorys();
				} else {
					uni.showToast({
						title: '未找到匹配的学生',
						icon: 'none'
					});
				}
			},
			confirmFinish() {
				if (!this.comment.trim()) {
					uni.showToast({
						title: '请填写评论内容',
						icon: 'none'
					});
					return;
				}

				let that = this;
				let student = this.currentStudent;

				uni.request({
					url: globalVariable+ "/changeMyComponent?id="+student.id+"&comment="+that.comment,
					method: 'POST',
					success(res) {
						let info = res.data;
						uni.showToast({
							title: info.message
						});
						student.isFinish=1;
					}
				});
			}
		}
	};
</script>

<style scoped>
	.txt{
		width: 100%;
		height: 200rpx;
		background-color: rgba(255,255,255,0.7);
		border-radius: 10px;
		/* padding: 20rpx; */
		margin-bottom: 20rpx;
		text-indent: 20rpx;
	}
	@keyframes cardEnter {
		0% {
			transform: scale(0.9);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes cardLeave {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0.9);
			opacity: 0;
		}
	}

	.card-enter-active {
		animation: cardEnter 0.3s ease;
	}

	.card-leave-active {
		animation: cardLeave 0.3s ease;
	}

	.back {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.container {}

	.header {
		text-align: center;
		margin-bottom: 24px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.search-container {
		display: flex;
		justify-content: center;
		/* margin-bottom: 16px; */
		align-items: center;
	}

	.search-input {
		padding: 8px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
		/* width: 200px; */
		width: 70%;
		background-color: rgba(255, 255, 255, 0.7);
		margin-right: 10rpx;
		height: 100%;
	}

	.search-button {
		/* padding: 8px 16px; */
		/* margin-left: 8px; */
		background-color: #13ff89;
		color: white;
		border: none;
		cursor: pointer;
		width: 28%;
		height: 100%;
	}

	.search-button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}

	.card {
		margin-bottom: 16px;
		padding: 16px;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.7);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		height: 200rpx;
	}

	.card-header {
		margin-bottom: 8px;
	}

	.card-title {
		font-size: 20px;
		font-weight: bold;
	}

	.card-body {
		display: flex;
		flex-direction: column;
	}

	.student-name,
	.appointment,
	.message,
	.record {
		padding: 8px 0;
		border-bottom: 1px solid #eeeeee;
	}

	.appointment .subject {
		font-size: 18px;
		font-weight: bold;
	}

	.appointment .time,
	.appointment .date {
		font-size: 16px;
		color: #666666;
	}

	.pagination {
		display: flex;
		justify-content: space-between;
		/* position: absolute; */
		bottom: 50rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	button {
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		text-align: center;
	}

	button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}
</style>
